var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
canvas.width = screenWidth;
canvas.height = screenHeight;

var bgImgSrc = './img/bg.jpg';
var gameOverImgSrc = './img/Common.png';
var enemyImgSrc = './img/enemy.png';
var heroImgSrc = './img/hero.png';
var bulletImgSrc = './img/bullet.png';

var heroHeight = 70;//英雄高
var heroWidth = heroHeight * 186 / 130;//英雄宽

var bulletWidth = 20;//子弹宽
var bulletHeight = 108 * bulletWidth / 62;//子弹高

var enemyWidth = 70;//敌人宽
var enemyHeight = 79 * enemyWidth / 120;//敌人高

var enemys = [];//敌人列表

var bullets = [];//子弹列表

var collisions = [];//碰撞数据

var enemySpeed = 800;

var bulletSpeed = enemySpeed * 0.5;

var heroSpend = 1.3;

var score = 0;

var hero = {
	originX:screenWidth/2 - heroWidth/2,
	originY:screenHeight- heroHeight - 100,
	x:screenWidth/2 - heroWidth/2,
	y:screenHeight- heroHeight - 100,
};

//入口
function Main(){
	var bg = new BackGround();
	createImage(bgImgSrc,function(){
		
		var bgImgThis = this;
			
		createEnemyAndbullet();

		// collision();
		
		var enemyImgThis = this;
		initTouchEventHandler();

		//创建英雄
		createImage(heroImgSrc,function(){
			
			var heroImgThis = this;
				
			var interval = setInterval(function(){

				ctx.clearRect(0,0,canvas.width,canvas.height);
				
				bg.update();
				
				bg.render(bgImgThis);
				
				drawEnemy();
				
				drawHero = drawHero.bind(heroImgThis);
				drawHero();
				
				drawbullet();
	
				collision();

			},1000/60)
				
		})
			
	})
}

/**
 * 判断两个矩形是否相交
 * @param {*} rect1 = {x:x,y:y:width:width,height:height}
 * @param {*} rect2 = {x:x,y:y:width:width,height:height}
 */
function isArea(rect1,rect2){
	var maxX,maxY,minX,minY

	maxX = rect1.x+rect1.width >= rect2.x+rect2.width ? rect1.x+rect1.width : rect2.x+rect2.width
	maxY = rect1.y+rect1.height >= rect2.y+rect2.height ? rect1.y+rect1.height : rect2.y+rect2.height
	minX = rect1.x <= rect2.x ? rect1.x : rect2.x
	minY = rect1.y <= rect2.y ? rect1.y : rect2.y

	if(maxX - minX <= rect1.width+rect2.width && maxY - minY <= rect1.height+rect2.height){
		return true
	}else{
		return false
	}
}

//计算碰撞
function collision (){
	for(var i = 0;i<bullets.length;i++){
		for(var j = 0;j<enemys.length;j++){
			var bulletX = bullets[i].x;
			var bulletY = bullets[i].y;
			var enemyX = enemys[j].x;
			var enemyY = enemys[j].y;
			var flag = isArea({
					x:bulletX,
					y:bulletY,
					width:bulletWidth,
					height:bulletHeight
				},{
					x:enemyX,
					y:enemyY,
					width:enemyWidth,
					height:enemyHeight
				}
			);

			if(flag){
				bullets.splice(i,1);
				enemys.splice(j,1);
				score +=1;
				for(var k = 1;k<=19;k++){
					(function(k){
						setTimeout(function(){
							var explosion_img_url = './img/explosion' + k + '.png';
							createImage(explosion_img_url,function(){
								ctx.drawImage(this,0,0,64,48,bulletX,bulletY+k+10,64,48);
							})
						},10*k)
					})(k)
				}
			}

		}
	}

	
}

//初始化事件
function initTouchEventHandler(){
	canvas.addEventListener('touchstart',function(e){
		e.preventDefault()
		var x = e.touches[0].clientX;
    	var y = e.touches[0].clientY;
    	if(x>=hero.x && x<=hero.x+heroWidth && y>=hero.y && y<=hero.y+heroHeight){
    		hero.on = true;
    		hero.startX = x;
    		hero.startY = y;
    	}else{
			hero.on = false;
    	}
	});
	
	canvas.addEventListener('touchmove',function(e){
		e.preventDefault()
		var x = e.touches[0].clientX;
		var y = e.touches[0].clientY;
    	if(hero.on){
			var nextX = hero.originX+(x-hero.startX)*heroSpend;
			var nextY = hero.originY+(y-hero.startY)*heroSpend;
			if(nextX<0 || nextX>screenWidth-heroWidth || nextY<0 || nextY>screenHeight-heroHeight){
				return ;
			}
    		hero.x = nextX;
			hero.y = nextY;
    	}
	})
	
	canvas.addEventListener('touchend',function(e){
		e.preventDefault()
		hero.on = false;
		hero.originX = hero.x;
		hero.originY = hero.y;
	})
	
}

//生成敌人
function createEnemyAndbullet(){
	createImage(enemyImgSrc,function(){
		var enemyImgThis = this;
		
		var enemyInterval = setInterval(function(){
			
			var max = screenWidth-80;
			var min = 0;
			var num = Math.floor(Math.random()*(max-min+1)+min);
			enemys.push({
				x:num,
				y:-79,
				image:enemyImgThis
			});
				
		},enemySpeed);
		
	});
	
	createImage(bulletImgSrc,function(){
		
		var bulletImgThis = this;
		var bulletInterval= setInterval(function(){
			
			bullets.push({
	    		x:hero.x+(heroWidth-bulletWidth)/2,
	    		y:hero.y - bulletHeight ,
	    		image:bulletImgThis
	    	})
				
		},bulletSpeed);
		
	});
	
}

//绘制子弹
function drawbullet (){
	bullets.map(function(item){
		ctx.drawImage(item.image,0,0,62,108,item.x,item.y,bulletWidth,bulletHeight);
	})
}

//绘制敌人
function drawEnemy (){
	enemys.map(function(item){
		ctx.drawImage(item.image,0,0,120,79,item.x,item.y,enemyWidth,enemyHeight);
	})
}

//绘制英雄
function drawHero (){
	ctx.drawImage(this,0,0,186,130,hero.x,hero.y,heroWidth,heroHeight);
}

function createImage(imgSrc,callback){
	var image = new Image();
	image.src = imgSrc;
	image.onload = callback;
}

function BackGround(){
	this.top = 0;
}

BackGround.prototype.update = function(){
	
	//更新敌人坐标
	for(var i = 0;i<enemys.length;i++){
		if(enemys[i].y>=screenHeight){
			enemys.splice(i,1);
		}else{
			enemys[i].y += 5;
		}
	}
	
	//更新子弹坐标
	for(var i = 0;i<bullets.length;i++){
		if(bullets[i].y<=0){
			bullets.splice(i,1);
		}else{
			bullets[i].y -= 5;
		}
	}
	
	this.top += 2;
	
	if ( this.top >= screenHeight )
      this.top = 0
}

//背景图片
BackGround.prototype.render = function(img){
	ctx.drawImage(
      img,
      0,
      0,
      512,
      512,
      0,
      -screenHeight+this.top,
      screenWidth,
      screenHeight
    )
	
    ctx.drawImage(
      img,
      0,
      0,
      512,
      512,
      0,
      this.top,
      screenWidth,
      screenHeight
    );
}
			


function GameInfo() {

}

//游戏结束画面
GameInfo.prototype.renderGameOver = function(img) {
	ctx.drawImage(img, 0, 0, 119, 108, screenWidth / 2 - 150, screenHeight / 2 - 100, 300, 300);

	ctx.fillStyle = "#ffffff";
	ctx.font = "20px Arial";

	ctx.fillText(
		'游戏结束',
		screenWidth / 2 - 40,
		screenHeight / 2 - 100 + 50
	)

	ctx.fillText(
		'得分: ' + score,
		screenWidth / 2 - 40,
		screenHeight / 2 - 100 + 130
	)

	ctx.drawImage(
		img,
		120, 6, 39, 24,
		screenWidth / 2 - 60,
		screenHeight / 2 - 100 + 180,
		120, 40
	)

	ctx.fillText(
		'重新开始',
		screenWidth / 2 - 40,
		screenHeight / 2 - 100 + 205
	)

}

//精灵
function Sprite(){
	
	
	
}

Sprite.prototype.render = function(){
	
}
